<template>
    <div>
        <el-dialog
            :title="!dataForm.id ? '新增' : '修改'"
            :close-on-click-modal='false'
            width='80%'
            :visible.sync='visible'>
            <div class='container'>
                <div class='condition'>
                    <el-input v-model='dataForm.title' placeholder='标题' clearable
                              style='width: 200px;margin-right: 15px' />
                    <el-date-picker
                        v-model='dataForm.daterange'
                        type='daterange'
                        value-format='yyyy-MM-dd'
                        :picker-options='pickerOptions'
                        range-separator='至'
                        start-placeholder='开始日期'
                        end-placeholder='结束日期'
                        align='right'>
                    </el-date-picker>
                    <el-button style='margin-left: 15px' type='primary' @click='getDataList()'>查询</el-button>
                </div>
                <div>
                    <el-table
                        :data='dataList'
                        border
                        v-loading='dataListLoading'
                        @selection-change='selectionChangeHandle'
                        style='width: 100%;'>
                        <el-table-column
                            type='selection'
                            header-align='center'
                            align='center'
                            width='50'>
                        </el-table-column>
                        <el-table-column
                            prop='id'
                            header-align='center'
                            align='center'
                            width='80'
                            label='ID'>
                        </el-table-column>
                        <el-table-column
                            prop='title'
                            header-align='center'
                            align='center'
                            label='标题'>
                        </el-table-column>
                        <el-table-column
                            header-align='center'
                            align='center'
                            label='封面'>
                            <template slot-scope='scope'>
                                <img :src='scope.row.cover' class='cover'>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop='publishTime'
                            header-align='center'
                            align='center'
                            label='发布时间'>
                        </el-table-column>
                        <el-table-column
                            header-align='center'
                            align='center'
                            label='状态'>
                            <template slot-scope='scope'>
                                <div >
                                    <el-switch
                                        disabled
                                        active-text='正常'
                                        inactive-text='下架'
                                        v-model='scope.row.status'
                                        active-color='#13ce66'
                                        inactive-color='#ff4949'>
                                    </el-switch>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            fixed='right'
                            header-align='center'
                            align='center'
                            width='150'
                            label='操作'>
                            <template slot-scope='scope'>
                                <el-button style='margin-left: 10px' type='text' size='small'
                                           @click='linkNews(scope.row)'>添加
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        style='margin-top: 10px'
                        @size-change='sizeChangeHandle'
                        @current-change='currentChangeHandle'
                        :current-page='pageIndex'
                        :page-sizes='[10, 20, 50, 100]'
                        :page-size='pageSize'
                        :total='totalPage'
                        layout='total, sizes, prev, pager, next, jumper'>
                    </el-pagination>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import apis from '@/api/apis';

export default {
    data: function() {
        return {
            dataForm: {
                title: '',
                daterange: [],
                order: '',
            },
            visible: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataList: [],
            dataListLoading: false,
            dataListSelections: []
        };
    },

    methods: {
        init() {
            this.visible = true
            this.getDataList()
        },
        linkNews(news) {
            this.$emit("linkNews", news);
        },
        getDataList() {
            this.dataListLoading = true;
            var params = {
                'page': this.pageIndex,
                'limit': this.pageSize,
                'title': this.dataForm.title,
                'daterange': this.dataForm.daterange,
                'order': this.dataForm.order
            };
            apis.getNewsData(params).then(data => {
                if (data && data.code === 0) {
                    this.dataList = data.page.list;
                    this.totalPage = data.page.totalCount;
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });
        },

        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        },
        // 多选
        selectionChangeHandle(val) {
            this.dataListSelections = val;
        }
    }
};
</script>

<style scoped>
.cover {
    width: 50px;
    height: 50px;
}

.condition {
    margin-bottom: 15px;
}
</style>
